<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue中操作样式</title>
    <script src="./js/vue.js"></script>
    <style>
        .box1 {
            color: rgb(192, 200, 96);
        }

        .box2 {
            font-size: 100px;
        }

        .box3{
            color:aqua;
        }
    </style>
</head>

<body>
    <!-- 
        在vue中操作样式的时候，用到了 :class 与 :style ；
        :class 与 :style 都可以设置一个值，也可以设置多个值；
        :class 设置基本数据类型
        :style 设置引用数据类型
     -->
    <div class="box">
        <!-- v-bind 绑定后的class当中有一个之写法如下 -->
        <h1 :class="box">孙悟空很帅！</h1>
        <!-- :class 设置多个值 -->
        <h1 :class="[box,box1]">孙悟空</h1>

        <!-- :style 设置引用数据类型 ，设置一个对象 -->
        <h1 :style="obj">猪八戒</h1>
        <!-- 行内样式设置 -->
        <h1 style="color:red;font-size:'30px'">沙和尚</h1>
        <!-- 行内样式与变量结合 -->
        <h1 :style="{color:'yellow',fontSize:fontSize}">白龙马</h1>

        <!-- 类名通过计算属性的方式得到 -->
        <!-- <h1 :class="classYN">唐僧</h1>
        <h1 :style="styleYN">玉皇大帝</h1>
        <button @click="flag=!flag">更改标识</button> -->

        <!-- 对象 -->
        <!-- 根据flag的状态决定box3是否添加为他的类名 -->
        <h1 :class="{box3:flag}">王母娘娘</h1>
        <button @click="flag=!flag">更改标识</button>
    </div>
    <script>
        let vm = new Vue({
            el: '.box',
            data: {
                box: 'box1',
                box1: 'box2',
                fontSize: '20px',
                flag: true,
                obj: {
                    color: 'pink',
                    fontSize: '50px'
                }
            },
            computed: {
                classYN() {
                    return this.flag ? this.box : this.box1;
                },
                styleYN() {
                    return this.flag ? this.obj : '';
                }
            }
        })
    </script>
</body>

</html>